<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京站智能网格化管理系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/common.css">
    <link rel="stylesheet" href="../lib/css/iconFont/iconfont.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/count.css"> -->
    <link rel="stylesheet" href="../lib/css/pagination.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/station.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/newcount.css">
    <style type="text/css">
    </style>
</head>
<body>
<div class="station_grid wraper">
    <div class="searchwrap">
        <!-- 日期时间 -->
        <div class="searchelm searchtime1">
            
            <div class="select2_wrap" style="min-width:14rem;max-width:30%">
                <input type="hidden" id="userid" />
                <div id="user" class="search_control groupselect tagselect" style="min-width:14rem;width:100%;"></div>
                <div class="groudtree"></div>
            </div>
            
            <input type="text" id="datetimepicker" class="search_control" name="ptime_start">
            <input type="text" id="datetimepicker2" class="search_control" name="ptime_end">
            
            <input type="button" value="查询" id="lookUp1" class="lookUp" style="left:66rem;"/>
        </div>
        <!-- 图表导出 切换 -->
        <!-- <div class="tabbar clearfix">
            <ul class="tab">
                <li class="tab_li tab_li_click"><i class="icon iconfont icon-tubiao"></i>图形</li>
                <li class="tab_li"><i class="icon iconfont icon-biaoge"></i>表格</li>
                <li class="tab_li"><i class="icon iconfont icon-daochu"></i>导出</li>
            </ul>
        </div> -->
    </div>
    <!-- echarts统计图表 -->
    <div class="main_content">
        <!-- 干部网格巡视统计 -->
        <div class="mcharts nan" id="chart" style="width:100%;height:100%;"></div>
        <!-- 人员表格 -->
        <!-- <div class="station_shaow_detail nan none" style="display:none">
            <table class="station_shaow_detail_table common">
                <caption style="font-size: 2.4rem;">职工网格巡视任务统计</caption>
            </table>
                <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string">
            </div>
        </div> -->
        <!-- 下钻信息表 -->
        <div class="station_shaow_detail drilldown" style="display:none">
            <div class="div_close">
                <p class="p_close"><a href="#" class="" style="">《&nbsp;返回</a></p>
            </div>
            <div class="drilldown_info">
                <!-- 明细表 -->
                <table class="station_shaow_detail_table  drilldown_table">
                <caption style="font-size: 2.4rem;">职工网格巡视详情</caption>
                    <tbody  id="result_1">
                    </tbody>
                </table>
            </div>
            <div class="interim">
                <div class="M-box1" id="page_string1"></div>
            </div>
        </div>
        <div class="lds-css block">
            <div class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- <script type="text/javascript" src="/assets/js/jquery.1.10.1.js"></script> -->
<script type="text/javascript" src="../lib/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/js/base.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/jquery.pagination.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/depchoice/edep_plugin.js"></script>
<script type="text/javascript" src="../lib/js/ztreeJs.js"></script>
<script type="text/javascript" src="../lib/js/echarts.js"></script>
<script type="text/javascript" src="../lib/js/count.js"></script>
<script  type="text/javascript">
var page = 1 ,common=2,isDetail=false,name=''//页数
var chart=echarts.init(document.getElementById("chart"));
//查询
$("#lookUp1").click(function () {
    common_request()
});

//统计图
function deviceGridRepairChart(data){
    $('.lds-css').addClass('block')
    //统计图
    var _data = data
    console.log(_data)
    $.ajax({
        url: serverUrl.base+serverUrl.countQ+'get_worker',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            // 根据数据库取到结果拼接现在结果
            var _data = res.data
            _data.title = "职工网格巡视任务统计"
            _data.legend=['已接任务数','完成任务数']
            _data.chartxname = _data.UserName
            _data.chartxdata = [_data.num,_data.wnum]
            refreshChart(_data);
        }
    });
}
//表格
function deviceGridRepairTableDropDown(data){
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.countQ+'get_worker',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.station_shaow_detail').hide()
            $('.ecahrts_style').hide()
            $('.drilldown').show()
            // 根据数据库取到结果拼接现在结果
            var _data = res.resultinfo.list
            $('.station_shaow_detail_table').createTable({data:_data,columns:[
                {name:'工号',field:'user_account',w:'4rem'},
                {name:'姓名',field:'user_name',w:'10rem'},
                {name:'岗位',field:'gname',render:function(index,elm,data){
                    if(elm != '' && elm != undefined && elm != null){
                        return elm
                    }else if(data.post_name != '' && data.post_name != undefined && data.post_name != null){
                        return data.post_name
                    }else{
                        return '无岗位'
                    }
                },w:'10rem'},
                {name:'部门',field:'buname',w:'10rem'},
                {name:'巡视网格',field:'grid_name',w:'10rem'},
                {name:'任务完成区间',field:'start_time',render:function(index,elm,data){
                    return elm + '~'+ data.end_time
                },w:'8rem'},
                {name:'巡视状态',field:'status',w:'8rem'},
                {name:'完成时间',field:'addtime',w:'8rem'}
            ]})
            $("#page_string1").html(res.resultinfo.obj);
            
        }
    });
}
$('.div_close').on('click',function(){
    isDetail = false
    $('.drilldown').hide()
    $('.searchtime1').show()
    if(common == 1){
        $('.station_shaow_detail').show()       
    }else{
        $('.mcharts').show()
    }
})
//统计图 样式
function refreshChart(data){
    console.log(data)
    var _data=data
    chart.setOption({
            title:{
                text:_data.title,
                x:"center",
                textStyle:{
                    color:"#fff",
                    fontSize:30
                }
            },
            tooltip:{
                trigger:"axis",
                axisPointer:{
                    type:"shadow"
                }
            },
            legend:{
                data:_data.legend,
                left:"80%",
                y:"10%",
                textStyle:{
                    color:"#fff",
                    fontSize:16
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show:true,
                        excludeComponents :['toolbox'],
                        pixelRatio: 2,
                    }
                }
            },
            grid:{
                left:"3%",
                right:"4%",
                bootom:"10%",
                top:"25%",
                containLabel:true
            },
            xAxis:[{
                type:"value",
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    interval:0,
                    show:true,
                    // rotate:60,
                    margin:2,
                    textStyle:{
                        color:"#fff"
                    },
                },
                axisLine:{
                    lineStyle:{
                        color:"#666"
                    }
                }
            }],
            yAxis:[{
                type:"category",
                inverse:"false",
                data:data.chartxname,
                axisLine:{
                    lineStyle:{
                        color:"#666"
                    }
                },
                axisLabel:{
                    show:true,
                    textStyle:{
                        color:"#fff",
                    }
                },
            }],
             dataZoom: [
            {
                type: 'slider',
                textStyle:{
                    color:"#fff",
                    
                },
                yAxisIndex: 0,
                start: 0,
                endValue:7,
                minValueSpan:7,
                maxValueSpan:7
            },
        ],
            series:[{
                name:_data.legend[0],
                type:"bar",
                data:data.num,
                barGap: 0,
                itemStyle:{
                    normal:{
                        color:"#BBC0C0",
                        label:{
                            show:false,
                            // position:"insideTop",
                        }
                    }
                }
            },
                {
                    name:_data.legend[1],
                    type:"bar",
                    data:data.wnum,
                    itemStyle:{
                        normal:{
                            color:"#CCD93C",
                            label:{
                                show:false,
                                // position:"insideTop"
                            }
                        }
                    }
                }]
        })

    };
// 下钻信息
chart.on('click',function(param){
    $('.searchtime1').hide()
    name=param.name;
    page=1;
    isDetail= true
    common=2
    $('.mcharts').hide() 
    common_request()   
})

function common_request(elm){
    if(arguments[0]){
        page = arguments[0]
    }else{
        page = 1
    }
    var _data = {
        'page':page,
        'start_time':$('#datetimepicker').val(),
        'end_time':$('#datetimepicker2').val(),
        'id_arr': $('#userid').val()==''?[]:$('#userid').val().split(',')
        // 'time':<?php echo time();?>,
    };
    if(isDetail){
        _data.id_arr=null,
        _data.name = name
        deviceGridRepairTableDropDown(_data)
    }else{
        deviceGridRepairChart(_data)
    }    
}
common_request()
//查询
function search_(){
    page = 1 ;
    common_request(1);  
}

$('.tagselect').on('click',function(){
    showsDeptWin('user','userid','1',false)
})

// $('.groupType').on('change',function(){
//     var $this = $(this)
//     var type = $this.val()
//     if(type == '1'){
//         //(id,uid,type,vid)
//         showsDeptWin('user','userid','6',false)
//     }else{
//         showsDeptWin('user','userid','5',false)
//     }
// })

$('.fdep').rpSelect({url:serverUrl.base+serverUrl.Fdep,multiple:false})


</script>
</html>

